<script setup lang="ts">
import { useInventoryDevice } from './InventoryDevice.script'
import PageContainer from '@/components/PageContainer.vue'
import SearchForm from '@/components/SearchForm.vue'
import StatCard from '@/components/StatCard.vue'
import DataTable from '@/components/DataTable.vue'
import { formatDateTime } from '@/utils'
import { Plus, Upload, Download, Tools, ArrowDown } from '@element-plus/icons-vue'

const {
  loading,
  submitting,
  importing,
  deviceDialogVisible,
  importDialogVisible,
  isEdit,
  selectedRows,
  selectedFile,
  importResult,
  deviceFormRef,
  uploadRef,
  searchForm,
  pagination,
  inventoryStats,
  inventoryList,
  deviceForm,
  deviceRules,
  getWasteTypeTag,
  getWasteTypeText,
  getStatusTag,
  getStatusText,
  loadInventoryList,
  handleSearch,
  handleReset,
  handlePageChange,
  handleSizeChange,
  handleSelectionChange,
  handleAddDevice,
  handleEdit,
  handleDeviceSubmit,
  handleImport,
  downloadTemplate,
  handleFileChange,
  handleImportSubmit,
  handleExport,
  handleBatchMaintenance,
  handleMoreAction
} = useInventoryDevice()
</script>

<template>
  <PageContainer title="库存设备">
    <template #actions>
      <el-button type="primary" @click="handleAddDevice">
        <el-icon><Plus /></el-icon>
        新增设备
      </el-button>
      <el-button @click="handleImport">
        <el-icon><Upload /></el-icon>
        批量导入
      </el-button>
      <el-button @click="handleExport">
        <el-icon><Download /></el-icon>
        批量导出
      </el-button>
    </template>



    <!-- 搜索表单 -->
    <SearchForm :model-value="searchForm" @search="handleSearch" @reset="handleReset">
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" placeholder="请输入设备编号或名称" clearable />
      </el-form-item>
      <el-form-item label="库存状态">
        <el-select v-model="searchForm.status" placeholder="请选择库存状态" clearable>
          <el-option label="在库" value="in_stock" />
          <el-option label="出库" value="out_stock" />
          <el-option label="报废" value="scrap" />
        </el-select>
      </el-form-item>
      <el-form-item label="回收类型">
        <el-select v-model="searchForm.wasteType" placeholder="请选择回收类型" clearable>
          <el-option label="纸壳类" value="paper" />
          <el-option label="织物类" value="textile" />
          <el-option label="混合类" value="mixed" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="searchForm.deviceType" placeholder="请选择设备类型" clearable>
          <el-option label="单投口" value="single" />
          <el-option label="双投口" value="double" />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库">
        <el-input v-model="searchForm.warehouse" placeholder="请输入仓库名称" clearable />
      </el-form-item>
      <el-form-item label="入库时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </SearchForm>

    <!-- 数据表格 -->
    <DataTable
      :data="inventoryList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="设备编号" min-width="120" />
      <el-table-column prop="remark" label="设备名称" min-width="120" />
      <el-table-column prop="wasteType" label="回收类型" min-width="100">
        <template #default="{ row }">
          <el-tag :type="getWasteTypeTag(row.wasteType)" effect="plain">
            {{ getWasteTypeText(row.wasteType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deviceType" label="设备类型" min-width="100">
        <template #default="{ row }">
          {{ row.deviceType === 'single' ? '单投口' : '双投口' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="库存状态" min-width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)" effect="plain">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="warehouse" label="仓库" min-width="120" />
      <el-table-column prop="inventoryDate" label="入库时间" min-width="140">
        <template #default="{ row }">
          {{ formatDateTime(row.inventoryDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-dropdown @command="(command) => handleMoreAction(row, command)">
            <el-button link type="primary">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="detail">查看详情</el-dropdown-item>
                <el-dropdown-item command="transfer">调拨</el-dropdown-item>
                <el-dropdown-item command="scrap" divided>报废</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </DataTable>



    <!-- 设备表单弹窗 -->
    <el-dialog
      v-model="deviceDialogVisible"
      :title="isEdit ? '编辑设备' : '新增设备'"
      width="600px"
      :before-close="handleDeviceSubmit"
    >
      <el-form
        ref="deviceFormRef"
        :model="deviceForm"
        :rules="deviceRules"
        label-width="100px"
      >
        <el-form-item label="设备编号" prop="code">
          <el-input v-model="deviceForm.code" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备名称" prop="remark">
          <el-input v-model="deviceForm.remark" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="回收类型" prop="wasteType">
          <el-select v-model="deviceForm.wasteType" placeholder="请选择回收类型">
            <el-option label="纸壳类" value="paper" />
            <el-option label="织物类" value="textile" />
            <el-option label="混合类" value="mixed" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型">
            <el-option label="单投口" value="single" />
            <el-option label="双投口" value="double" />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="warehouse">
          <el-input v-model="deviceForm.warehouse" placeholder="请输入仓库名称" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="deviceForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="deviceDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleDeviceSubmit">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog v-model="importDialogVisible" title="批量导入" width="500px">
      <div class="import-dialog">
        <div class="import-tips">
          <el-alert
            title="导入说明"
            type="info"
            description="请下载模板文件，按照模板格式填写数据后上传"
            show-icon
            :closable="false"
          />
        </div>
        <div class="import-actions">
          <el-button type="primary" @click="downloadTemplate">
            <el-icon><Download /></el-icon>
            下载模板
          </el-button>
        </div>
        <div class="upload-section">
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleFileChange"
            accept=".xlsx,.xls"
          >
            <template #trigger>
              <el-button type="primary">
                <el-icon><Upload /></el-icon>
                选择文件
              </el-button>
            </template>
            <template #tip>
              <div class="upload-tip">
                {{ selectedFile ? selectedFile.name : '请选择Excel文件 (.xlsx, .xls)' }}
              </div>
            </template>
          </el-upload>
        </div>
        <div v-if="importResult" class="import-result">
          <el-alert
            :title="`导入结果：成功 ${importResult.success} 条，失败 ${importResult.failed} 条`"
            :type="importResult.failed === 0 ? 'success' : 'warning'"
            show-icon
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="importing"
          :disabled="!selectedFile"
          @click="handleImportSubmit"
        >
          开始导入
        </el-button>
      </template>
    </el-dialog>
  </PageContainer>
</template>

<style lang="scss" scoped>
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.batch-actions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.import-dialog {
  .import-tips {
    margin-bottom: 20px;
  }

  .import-actions {
    margin-bottom: 20px;
  }

  .upload-section {
    margin-bottom: 20px;

    .upload-tip {
      margin-top: 8px;
      color: #909399;
      font-size: 12px;
    }
  }
}
</style>
